<!DOCTYPE html> 
<!--
  Copyright 2010 Google Inc.
 
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
 
     http://www.apache.org/licenses/LICENSE-2.0
 
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
 
  Original slides: Marcin Wichary (mwichary@google.com)
  Modifications: Chrome Developer Relations <chrome-devrel@googlegroups.com>
  Additional functionality & bug fixes: Filip Hracek (filiph@google.com)
-->
<html manifest="cache.manifest">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
    <title>O HTML5 v HTML5</title>
    <link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet" type="text/css" />
    <style>
      body {
        font: 20px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px; top: 0px;
      }
      
      .presentation {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0px;
        top: 0px;
        display: block;
        overflow: hidden;
        background: #778;
      }
      
      .slides {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        display: block;
        -webkit-transition: -webkit-transform 1s ease-in-out;
        -moz-transition: -moz-transform 1s ease-in-out;
        -o-transition: -o-transform 1s ease-in-out;
        transition: transform 1s ease-in-out;
        
        /* so it's visible in the iframe. */
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
        
      }
      
      .slide {
        display: none;
        position: absolute;
        overflow: hidden;
        width: 900px;
        height: 700px;
        left: 50%;
        top: 50%;
        margin-top: -350px;
        background-color: #eee;
        background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
        background: -moz-linear-gradient(bottom, #bbd, #fff);
        background: linear-gradient(bottom, #bbd, #fff);
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
      }
      
      .slide:nth-child(even) {
        -moz-border-radius: 20px 0;
        -khtml-border-radius: 20px 0;
        border-radius: 20px 0; /* includes Opera 10.5+ */
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-right-radius: 20px;
      }
      
      .slide:nth-child(odd) {
        -moz-border-radius: 0 20px;
        -khtml-border-radius: 0 20px;
        border-radius: 0 20px;
        -webkit-border-top-right-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
      }
 
      .slide p, .slide textarea, .slide section > ul, .slide section > ol {
        font-size: 140%;
		margin-left: 20px;
      }

	  .slide li {
		padding-top: 0.25em;
		padding-bottom: 0.25em;
	  }
 
      .slide .counter {
        color: #999999;
        position: absolute;
        left: 20px;
        bottom: 20px;
        display: block;
        font-size: 70%;
      }
 
      .slide.title > .counter,
      .slide.segue > .counter,
      .slide.mainTitle > .counter {
        display: none;
      }
 
      .force-render {
        display: block;
        visibility: hidden;
      }
      
      .slide.far-past {
        display: block;
        margin-left: -2400px;
      }
      
      .slide.past {
        visibility: visible;
        display: block;
        margin-left: -1400px;
      }
      
      .slide.current {
        visibility: visible;
        display: block;
        margin-left: -450px;
      }
      
      .slide.future {
        visibility: visible;
        display: block;
        margin-left: 500px;
      }
      
      .slide.far-future {
        display: block;
        margin-left: 1500px;
      }
      
      body.three-d div.slides {
        -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
        -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
        -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
        transform: translateX(50px) scale(0.8) rotateY(10deg);
      }
      
      /* Content */
      
      @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }
      @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }
      
      header {
        font-family: 'Droid Sans';
        font-weight: normal;
        letter-spacing: -.05em;
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
        left: 30px;
        top: 25px;
        margin: 0;
        padding: 0;
        font-size: 140%;
      }
      
      h1 {
        font-size: 140%;
        display: inline;
        font-weight: normal;
        padding: 0;
        margin: 0;
      }
      
      h2 {
        font-family: 'Droid Sans';
        color: black;
        font-size: 120%;
        padding: 0;
        margin: 20px 0;
      }
            
      h2:first-child {
        margin-top: 0;
      }
 
      section, footer {
        font-family: 'Droid Sans';
        color: #3f3f3f;
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
        margin: 100px 30px 0;
        display: block;
        overflow: hidden;
      }
      
      footer {
        font-size: 100%;
        margin: 20px 0 0 30px;
      }
 
      a {
        color: inherit;
        display: inline-block;
        text-decoration: none;
        line-height: 110%;
        border-bottom: 2px solid #3f3f3f;
      }
 
      ul {
        margin: 0;
        padding: 0;
      }
 
      button {
        font-size: 100%;
      }
      
      pre button {
        margin: 2px;
      }
      
      section.left {
        float: left;
        width: 390px;
      }
      
      section.small {
        font-size: 24px;
      }
      
      section.small ul {
        margin: 0 0 0 15px;
        padding: 0;
      }
      
      section.small li {
        padding-bottom: 0;
      }
            
      section.middle {
        line-height: 2em;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        height: 700px;
        width: 900px;
      }
      
      pre {
        text-align: left;
        font-family: 'Droid Sans Mono', Courier;
        font-size: 80%;
        padding: 10px 20px;
        background: rgba(255, 0, 0, 0.05);
        -webkit-border-radius: 8px;
        -khtml-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        border: 1px solid rgba(255, 0, 0, 0.2);
      }

	  code {
		font-family: 'Droid Sans Mono', Courier;
        font-size: 80%;
        padding: 3px 5px;
        background: rgba(255, 0, 0, 0.05);
        -webkit-border-radius: 4px;
        -khtml-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 1px solid rgba(255, 0, 0, 0.2);
	  }
      
      pre select {
        font-family: Monaco, Courier;
        border: 1px solid #c61800;
      }
        
      input {
        font-size: 100%;
        margin-right: 10px;
        font-family: Helvetica;
        padding: 3px;
      }
      input[type="range"] {
        width: 100%;
      }
      
      button {
        margin: 20px 10px 0 0;
        font-family: Verdana;
      }
      
      button.large {
        font-size: 32px;
      }
        
      pre b {
        font-weight: normal;
        color: #c61800;
        text-shadow: #c61800 0 0 1px;
        /*letter-spacing: -1px;*/
      }
      pre em {
        font-weight: normal;
        font-style: normal;
        color: #18a600;
        text-shadow: #18a600 0 0 1px;
      }
      pre input[type="range"] {
        height: 6px;
        cursor: pointer;
        width: auto;
      }
      
      div.example {
        display: block;
        padding: 10px 20px;
        color: black;
        background: rgba(255, 255, 255, 0.4);
        -webkit-border-radius: 8px;
        -khtml-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        margin-bottom: 10px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }
      
      video {
        -moz-border-radius: 8px;
        -khtml-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }
      
      .key {
        font-family: 'Droid Sans';
        color: black;
        display: inline-block;
        padding: 6px 10px 3px 10px;
        font-size: 100%;
        line-height: 30px;
        text-shadow: none;
        letter-spacing: 0;
        bottom: 10px;
        position: relative;
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: white;
        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
        -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
      }
      
      .key { font-family: Arial; }
      
      :not(header) > .key {
        margin: 0 5px;
        bottom: 4px;
      }
 
      .two-column {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
      }
 
      .stroke {
        -webkit-text-stroke-color: red;
        -webkit-text-stroke-width: 1px;
      } /* currently webkit-only */
      
      .center {
        text-align: center;
      }
      
      #presentation-counter {
        color: #ccc;
        font-size: 70%;
        letter-spacing: 1px;
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        text-align: center;
      }
      
      div:not(.current).reduced {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
      } 
      
      .no-transitions {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
      }
 
      .no-gradients {
        background: none;
        background-color: #fff;
      }
      
      ul.bulleted {
        padding-left: 30px;
      }
      
    </style> 
    
  </head> 
  <body> 

	    <div class="presentation"> 
	      <div id="presentation-counter"></div> 
	      <div class="slides"> 
	        <div class="slide"> 
	          <section class="middle"> 
	            <p><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="HTML5 logo"></p> 
				<p>Filip Hráček, Leden 2011</p>
	          </section> 
	        </div> 

			<div class="slide">
			<section>
			<header><h2 id="agenda">O čem budu mluvit</h2></header>

			<ul class="bulleted">
			<li>Co a jak s HTML5</li>
			<li>HTML5 a Google</li>
			<li>Chrome OS</li>
			</ul>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="co_je_html5">Co je HTML5?</h2></header>

			<ul class="bulleted">
			<li>HTML5 = doctype (<code>&lt;!DOCTYPE html&gt;</code>)</li>
			<li>HTML5 = <a href="http://dev.w3.org/html5/spec/Overview.html" title="HTML5">celá specifikace W3C pro HTML5</a> - canvas, video, geolokace, sémantika, APIs&#8230;</li>
			<li>HTML5 buzzword = všechny aktuální webové technologie (výše zmíněné, CSS3, WebM, WebGL, &#8230;)</li>
			</ul>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="u_je_html5_hotov">Už je HTML5 hotové?</h2></header>

			<p><a href="http://ishtml5readyyet.com">ishtml5readyyet.com</a> // <a href="http://caniuse.com" title="When can I use... Support tables for HTML5, CSS3, etc">caniuse.com</a></p>

			<p>V roce 2008 W3C oznámilo, že HTML5 nebude hotové až do roku <strong>2022</strong>&#8230;</p>

			<p>Ve skutečnosti funguje už teď. Jak &#8220;zapnout&#8221; HTML5?</p> 
			
			<pre>&lt;!DOCTYPE html&gt;</pre> 
			
			<p>Toť vše (více méně). </p>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="pohdka_o_asynchronnm_webu">Pohádka o asynchronním webu</h2></header>

			<p>Z technologického hlediska byl na začátku &#8220;Webu 2.0&#8221; <strong>IXMLHttpRequest</strong>, který vymyslel a implementoval Microsoft v roce 1995. Postupně jej zaimplementovaly všechny prohlížeče (už jako XMLHttpRequest), až si toho v roce 2006 všimlo W3C a publikovalo <em>Working Draft</em>.</p>

			<p>Obrovská část toho, co dnes považujeme za moderní web, stojí na 15 let staré technologii, která je pouze lépe dostupná skrze knihovny jako jQuery nebo Prototype. Pod povrchem to není nic krásného, ale funguje to.</p>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="jinmi_slovy">Jinými slovy</h2></header>

			<blockquote>
			  <p>Why do we have an <code>&lt;img&gt;</code> element? Why not an <code>&lt;icon&gt;</code> element? Or an <code>&lt;include&gt;</code> element? Why not a hyperlink with an include attribute, or some combination of rel values? Why an <code>&lt;img&gt;</code> element? Quite simply, because Marc Andreessen shipped one, and <strong>shipping code wins</strong>.</p>
				
				<p>&#8212; Mark Pilgrim, Dive into HTML5</p>
			</blockquote>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="tyi_fze_pijet_technologie">Čtyři fáze přijetí technologie</h2></header>

			<ol>
			<li>&#8220;Revolucionáři&#8221;</li>
			<li>Early adopters</li>
			<li>Mainstream</li>
			<li>Téma (např. požadavek na pracovním trhu)</li>
			</ol>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="pro_je_html5_dleit">Proč je HTML5 důležité?</h2></header>

			<p>Zjednodušuje vývoj moderních webových stránek a tím <strong>umožňuje opravdový &#8220;cloud&#8221;</strong>.</p>

			<ul class="bulleted">
			<li>Webové aplikace, které fungují i offline.</li>
			<li>Úzká integrace s desktopem (drag&amp;drop&#8230;).</li>
			<li>Lepší UX (date picker).</li>
			<li>Hezčí UI (web fonts)</li>
			<li>Dosud nevídané věci jako akcelerované 3D.</li>
			<li>Interoperabilita: desktop, tablet, mobil.</li>
			<li>Sémantika = SEO</li>
			</ul>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="pro_je_html5_dleit_pro_google">Proč je HTML5 důležité pro Google?</h2></header>

			<p>Protože v Googlu hodně sázíme právě na cloud.</p>

			<ul class="bulleted">
			<li>Skoro nezáleží na tom, u jakého přístroje zrovna sedím.</li>
			<li>"Operační systém" je můj prohlížeč.</li>
			<li>Výpočetně složité úkony dělá server &mdash; skoro neřeším vlastní hardware.</li>
			</ul>
			
			<p>To všechno má Google poměrně zmáklé, alespoň do budoucna.</p>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="co_google_dl_pro_html5">Co Google dělá pro HTML5</h2></header>

			<ul class="bulleted">
			<li>Ian Hickson (Googler) je specs editor</li>
			<li>Zkušenosti z Google Gears použity pro offline funkcionalitu.</li>
			<li>Chrome se snaží implementovat jako o závod.</li>
			<li>Promo: stránka <a href="http://HTML5rocks.com" title="HTML5 Rocks - A resource for open web HTML5 developers">HTML5rocks.com</a></li>
			<li>Chrome Web Store</li>
			</ul>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="chrome_web_store">Chrome Web Store</h2></header>

			<ul class="bulleted">
			<li>Už teď desítky miliónů uživatelů.</li>
			<li>HTML5-safe (cílíte pouze lidi, kteří mají HTML5 enabled browser)</li>
			<li>Vizibilita (a bude ještě větší)</li>
			<li>Dvě cesty:
			<ul class="bulleted">
			<li>Buď wrapper kolem existující stránky (NYTimes)</li>
			<li>Nebo CRX soubor se vším všudy (ChromeDeck)
			<ul class="bulleted">
			<li>umí cross-server komunikaci</li>
			</ul></li>
			</ul></li>
			</ul>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="chrome_os">Chrome OS</h2></header>

			<ul class="bulleted">
			<li>zdarma a Open Source</li>
			<li>princip je jednoduchý: Chrome běžící ve windowing systému nad modifikovaným Linuxovým jádrem.</li>
			<li>Google spolupracuje s: Acer, Adobe, ASUS, Freescale, Hewlett-Packard, Qualcomm, Texas Instruments &#8230;</li>
			<li>první volně dostupný hardware už v tomto roce (doufám)</li>
			</ul>

			</section>
			</div>

			<div class="slide">
			<section>
			<header><h2 id="doporuen_etba">Doporučená četba</h2></header>

			<ul class="bulleted">
			<li><a href="http://dev.w3.org/html5/spec/Overview.html">http://dev.w3.org/html5/spec/Overview.html</a></li>
			<li><a href="http://diveintohtml5.org/">http://diveintohtml5.org/</a></li>
			<li><a href="http://caniuse.com/">http://caniuse.com/</a></li>
			</ul>

			<p><strong>Příklady</strong></p>

			<ul class="bulleted">
			<li><a href="http://nikebetterworld.com/">http://nikebetterworld.com/</a></li>
			<li><a href="http://playbiolab.com/">http://playbiolab.com/</a></li>
			</ul>

			</section>
			</div>

			<div class="slide">
			<section class="middle">
			<header><h2 id="diky">Díky za pozornost!</h2></header>

			<p><small>Filip Hráček, Google ČR</small></p>

			</section>
			</div>

	      </div> <!-- slides --> 

	    </div> <!-- presentation -->
 
    <script> 
      (function() {
        var doc = document;
        var disableBuilds = true;
 
        var ctr = 0;
        var spaces = /\s+/, a1 = [''];
 
        var toArray = function(list) {
          return Array.prototype.slice.call(list || [], 0);
        };
 
        var byId = function(id) {
          if (typeof id == 'string') { return doc.getElementById(id); }
          return id;
        };
 
        var query = function(query, root) {
          if (!query) { return []; }
          if (typeof query != 'string') { return toArray(query); }
          if (typeof root == 'string') {
            root = byId(root);
            if(!root){ return []; }
          }
 
          root = root || document;
          var rootIsDoc = (root.nodeType == 9);
          var doc = rootIsDoc ? root : (root.ownerDocument || document);
 
          // rewrite the query to be ID rooted
          if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
            root.id = root.id || ('qUnique' + (ctr++));
            query = '#' + root.id + ' ' + query;
          }
          // don't choke on something like ".yada.yada >"
          if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }
 
          return toArray(doc.querySelectorAll(query));
        };
 
        var strToArray = function(s) {
          if (typeof s == 'string' || s instanceof String) {
            if (s.indexOf(' ') < 0) {
              a1[0] = s;
              return a1;
            } else {
              return s.split(spaces);
            }
          }
          return s;
        };
 
        var addClass = function(node, classStr) {
          classStr = strToArray(classStr);
          var cls = ' ' + node.className + ' ';
          for (var i = 0, len = classStr.length, c; i < len; ++i) {
            c = classStr[i];
            if (c && cls.indexOf(' ' + c + ' ') < 0) {
              cls += c + ' ';
            }
          }
          node.className = cls.trim();
        };
 
        var removeClass = function(node, classStr) {
          var cls;
          if (classStr !== undefined) {
            classStr = strToArray(classStr);
            cls = ' ' + node.className + ' ';
            for (var i = 0, len = classStr.length; i < len; ++i) {
              cls = cls.replace(' ' + classStr[i] + ' ', ' ');
            }
            cls = cls.trim();
          } else {
            cls = '';
          }
          if (node.className != cls) {
            node.className = cls;
          }
        };
 
        var toggleClass = function(node, classStr) {
          var cls = ' ' + node.className + ' ';
          if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
            removeClass(node, classStr);
          } else {
            addClass(node, classStr);
          }
        };

		var getCurrentSlideFromHash = function() {
			num = null;
			h = window.location.hash;
	        try {
				num = parseInt(h.split('#slide')[1], 10);
			} catch (e) { /* squeltch */ }
			return num;
		}
 
        var ua = navigator.userAgent;
        var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined;
        var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined;
        var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;
 
        var canTransition = (function() {
          var ver = parseFloat(ua.split('Version/')[1]) || undefined;
          // test to determine if this browser can handle CSS transitions.
          var cachedCanTransition = 
            (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
          return function() { return cachedCanTransition; }
        })();
 
        //
        // Slide class
        //
        var Slide = function(node, idx) {
          this._node = node;
          if (idx >= 0) {
            this._count = idx + 1;
          }
          if (this._node) {
            addClass(this._node, 'slide distant-slide');
          }
          this._makeCounter();
          this._makeBuildList();
        };
 
        Slide.prototype = {
          _node: null,
          _count: 0,
          _buildList: [],
          _visited: false,
          _currentState: '',
          _states: [ 'distant-slide', 'far-past',
                     'past', 'current', 'future',
                     'far-future', 'distant-slide' ],
          setState: function(state) {
            if (typeof state != 'string') {
              state = this._states[state];
            }
            if (state == 'current' && !this._visited) {
              this._visited = true;
              this._makeBuildList();
            }
            removeClass(this._node, this._states);
            addClass(this._node, state);
            this._currentState = state;
 
            // delay first auto run. Really wish this were in CSS.
            /*
            this._runAutos();
            */
            var _t = this;
            setTimeout(function(){ _t._runAutos(); } , 400);
          },
          _makeCounter: function() {
            if(!this._count || !this._node) { return; }
            var c = doc.createElement('span');
            c.innerHTML = this._count;
            c.className = 'counter';
            this._node.appendChild(c);
          },
          _makeBuildList: function() {
            this._buildList = [];
            if (disableBuilds) { return; }
            if (this._node) {
              this._buildList = query('[data-build] > *', this._node);
            }
            this._buildList.forEach(function(el) {
              addClass(el, 'to-build');
            });
          },
          _runAutos: function() {
            if (this._currentState != 'current') {
              return;
            }
            // find the next auto, slice it out of the list, and run it
            var idx = -1;
            this._buildList.some(function(n, i) {
              if (n.hasAttribute('data-auto')) {
                idx = i;
                return true;
              }
              return false;
            });
            if (idx >= 0) {
              var elem = this._buildList.splice(idx, 1)[0];
              var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
              var _t = this;
              if (canTransition()) {
                var l = function(evt) {
                  elem.parentNode.removeEventListener(transitionEnd, l, false);
                  _t._runAutos();
                };
                elem.parentNode.addEventListener(transitionEnd, l, false);
                removeClass(elem, 'to-build');
              } else {
                setTimeout(function() {
                  removeClass(elem, 'to-build');
                  _t._runAutos();
                }, 400);
              }
            }
          },
          buildNext: function() {
            if (!this._buildList.length) {
              return false;
            }
            removeClass(this._buildList.shift(), 'to-build');
            return true;
          },
        };
 
        //
        // SlideShow class
        //
        var SlideShow = function(slides) {
          this._slides = (slides || []).map(function(el, idx) {
            return new Slide(el, idx);
          });
 
          this.current = getCurrentSlideFromHash();

          this.current = isNaN(this.current) ? 1 : this.current;
          var _t = this;
          doc.addEventListener('keydown', 
              function(e) { _t.handleKeys(e); }, false);
          doc.addEventListener('mousewheel', 
              function(e) { _t.handleWheel(e); }, false);
          doc.addEventListener('DOMMouseScroll', 
              function(e) { _t.handleWheel(e); }, false);
          doc.addEventListener('touchstart', 
              function(e) { _t.handleTouchStart(e); }, false);
          doc.addEventListener('touchend', 
              function(e) { _t.handleTouchEnd(e); }, false);
          window.addEventListener('popstate', 
              function(e) { _t.go(e.state); }, false);
		  window.addEventListener('load',
			  function(e) { toggleSize(); }, false);
          this._update();
        };
 
        SlideShow.prototype = {
          _slides: [],
          _update: function(dontPush) {
            document.querySelector('#presentation-counter').innerText = this.current;
            if (history.pushState) {
              if (!dontPush) {
                history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
              }
            } else {
              window.location.hash = 'slide' + this.current;
            }
            for (var x = this.current-1; x < this.current + 7; x++) {
              if (this._slides[x-4]) {
                this._slides[x-4].setState(Math.max(0, x-this.current));
              }
            }
          },
 
          //current: 0,
          next: function() {
			if (this.current == null) {
				this.current = 0;
			}
			try {
				if (!this._slides[this.current-1].buildNext()) {
	              this.current = Math.min(this.current + 1, this._slides.length);
	              this._update();
				}
	        } catch (e) { // when opened for the first time, this._slides[this.current-1] is undefined
				this.current = 1;
				this._slides[this.current-1].buildNext();
				this._update();
			}
          },
          prev: function() {
            this.current = Math.max(this.current-1, 1);
            this._update();
          },
          go: function(num) {
			if (num == null) {
				num = getCurrentSlideFromHash();
			} 
            if (history.pushState && this.current != num) {
              history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
            }
            this.current = num;
            this._update(true);
          },
 
          _notesOn: false,
          showNotes: function() {
            var isOn = this._notesOn = !this._notesOn;
            query('.notes').forEach(function(el) {
              el.style.display = (notesOn) ? 'block' : 'none';
            });
          },
          switch3D: function() {
            toggleClass(document.body, 'three-d');
          },
          handleWheel: function(e) {
            var delta = 0;
            if (e.wheelDelta) {
              delta = e.wheelDelta/120;
              if (isOpera) {
                delta = -delta;
              }
            } else if (e.detail) {
              delta = -e.detail/3;
            }
 
            if (delta > 0 ) {
              this.prev();
              return;
            }
            if (delta < 0 ) {
              this.next();
              return;
            }
          },
          handleKeys: function(e) {
            if (/^(input|textarea)$/i.test(e.target.nodeName) ||
                e.target.isContentEditable) {
              return;
            }

            switch (e.keyCode) {
              case 37: // left arrow
			  case 33: // PgUp
                this.prev(); break;
              case 39: // right arrow
			  case 34: // PgDn
              case 32: // space
                this.next(); break;
              case 50: // 2
                this.showNotes(); break;
              case 51: // 3
                this.switch3D(); break;
			  case 52: // 4
				toggleSize(); break;
			  case 53: // 5 
				toggleTransitions(); break;
            }
          },
          _touchStartX: 0,
          handleTouchStart: function(e) {
            this._touchStartX = e.touches[0].pageX;
          },
          handleTouchEnd: function(e) {
            var delta = this._touchStartX - e.changedTouches[0].pageX;
            var SWIPE_SIZE = 150;
            if (delta > SWIPE_SIZE) {
              this.next();
            } else if (delta < -SWIPE_SIZE) {
              this.prev();
            }
          },
        };
 
        // Initialize
        var slideshow = new SlideShow(query('.slide'));

        var counters = document.querySelectorAll('.counter');
        var slides = document.querySelectorAll('.slide');
		
        function toggleCounter() {
          toArray(counters).forEach(function(el) {
            el.style.display = (el.offsetHeight) ? 'none' : 'block';
          });
        }
        
        function toggleSize() {
          toArray(slides).forEach(function(el) {
            if (!/reduced/.test(el.className)) {
              addClass(el, 'reduced');
            }
            else {
              removeClass(el, 'reduced');
            }
          });
        }

        function toggleTransitions() {
          toArray(slides).forEach(function(el) {
            if (!/no-transitions/.test(el.className)) {
              addClass(el, 'no-transitions');
            }
            else {
              removeClass(el, 'no-transitions');
            }
          });
        }
        
        function toggleGradients() {
          toArray(slides).forEach(function(el) {
            if (!/no-gradients/.test(el.className)) {
              addClass(el, 'no-gradients');
            }
            else {
              removeClass(el, 'no-gradients');
            }
          });
        }
      })();
    </script> 
 
    <!--[if lt IE 9]>
    <script 
      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
    </script>
    <script>CFInstall.check({ mode: "overlay" });</script>
    <![endif]--> 
    
  </body> 
</html>